import React from "react";
import {PojInfoDto} from "@/api/Types/ObjInterfaces.ts";
import {createStyles} from "antd-style";
import ObjApi from "@/api/ObjApi.ts";
import {UserOutlined} from "@ant-design/icons";
import {Empty} from "antd";
import {useNavigate, useNavigation} from "react-router-dom";

interface Props {
    pojInfoDto: PojInfoDto
}

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            height: 300px;
            position: relative;
            overflow: clip;
            transition: all .2s ease-in-out;
            
            :hover {
                cursor: pointer;
                .image {
                    transform: scale(1.2);
                }
                .content {
                    transform: scale(1.2);
                    
                    hr {
                        width: 100%;
                    }
                }
            }
            
            .image {
                height: 300px;
                transition: all .2s ease-in-out;
                display: grid;
                place-content: center;
                img {
                    width: fit-content;
                    height: 300px;
                    object-fit: contain;
                    object-position: center;
                }
            }
            .content {
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: transparent;
                z-index: 2;
                backdrop-filter: blur(10px) brightness(.8);
                width: 100%;
                transition: all .2s ease-in-out;
                transform-origin: left bottom;
                font-size: 20px;
                padding: 5px;
                
                h3 {
                    font-size: 25px;
                    font-weight: 500;
                    line-height: 1;
                }
                
                hr {
                    margin: 2px 0 5px 0;
                    width: 20%;
                    transition: all .5s ease-in-out;
                }
            }
        `
    }
})

const Image:React.FC<{pojInfoDto: PojInfoDto}> = ({pojInfoDto}) => {

    if (pojInfoDto.objInfoList[0]) {
        return (
            <img src={ObjApi.getObjLink(pojInfoDto.objInfoList[0].objLink)}
                 alt={pojInfoDto.name}/>
        )
    }

    return (
        <Empty />
    )
}

const PojViewer: React.FC<Props> = ({pojInfoDto}) => {
    const styles = useStyles().styles;
    const navigate = useNavigate();

    const onContainerClick = () => {
        navigate('/poj/' + pojInfoDto.id)
    }

    return (
        <div className={styles.container}
             onClick={onContainerClick}
        >
            <div className="image">
                <Image pojInfoDto={pojInfoDto}/>
            </div>
            <div className="content">
                <h3>{pojInfoDto.name}</h3>
                <hr/>
                <p>{pojInfoDto.description}</p>
            </div>
        </div>
    )
}

export default PojViewer
